<template>
  <div class="background">
      <h1>{{ showLogin ? 'Login' : 'Register' }}</h1>
      <button @click="toggleForm">{{ showLogin ? 'Go to Register' : 'Go to Login' }}</button>
      <LoginForm v-if="showLogin" @login="handleLogin" />
      <RegisterForm v-else @register="handleRegister" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import LoginForm from './components/login.vue';
import RegisterForm from './components/Reg.vue';

const showLogin = ref(true); 

const toggleForm = () => {
  showLogin.value = !showLogin.value;
};

const handleLogin = () => {
  console.log('Login successful');
};

const handleRegister = () => {
  console.log('Register successful');
};
</script>

<style>
.background {
  background-image: url('./image/无限进步.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>